<template>
	<div class="pets navBar">
		<van-sticky>
			<van-nav-bar :title="$route.meta.title" @click-right="show = !show">
				<template #right>
					<img class="smjl" src="../../assets/pets/smjl.png" alt="">
				</template>
			</van-nav-bar>
		</van-sticky>
		
		<transition name="tabbar-fold">
			<div v-if="pets_list" class="petsList">
				<RobotItem :petslist="pets_list"></RobotItem>
			</div>
		</transition>
		
		<div v-if="!pets_list" style="text-align: center;padding-top: 2rem;">
			<van-loading size="24px">加载中...</van-loading>
		</div>
		
		<div class="pets_popop">
			<van-popup v-model="show"  :style="{ height: '100%',width:'52%' }" position="right">
				<div class="pets_menu">
					<p @click="$router.push('/petsRecord')">
						<span>预约订单</span>
						<img src="../../assets/pets/go.png" alt="">
					</p>
					<p @click="$router.push({name:'petsOrder',params:{type:0}})">
						<span>转让订单</span>
						<img src="../../assets/pets/go.png" alt="">
					</p>
					<p @click="$router.push({name:'petsOrder',params:{type:1}})">
						<span>抢购订单</span>
						<img src="../../assets/pets/go.png" alt="">
					</p>
				</div>
			</van-popup>
		</div>
	</div>
</template>

<script>
	import RobotItem from "../../components/RobotItem.vue"
	export default{
		name:"pets",
		components:{
			RobotItem
		},
		async created(){
			
			try{
			 
				const data = await this.$apis.Pets.index()
				
				this.pets_list = data.data  
				
			}catch(e){
				//TODO handle the exception
			}
			
		
		},
		data(){
			return{
				show:false,
				
				// 宠物列表
				pets_list:""
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
		
	.pets{
		width: 100%;
		height: 100%;
		position: absolute;
		overflow-y: scroll;
		background-color: #112037;
		
		.pets_popop{
			
			/deep/ .van-popup{
				background:rgba(23,47,77,1);
				box-shadow:inset .24rem 0rem .24rem  -.24rem rgba(28,176,212,1);
			}
			
		}
		
		.petsList{
			padding-top: .4rem;
		}
		
		.pets_menu{
			margin-top: 1rem;
			width: 100%;
			color: #94E9FF;
			font-size: .3rem;
			
			p{
				padding: .3rem .33rem;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			img{
				width: .13rem;
				height: .24rem;
			}
		}
	}
</style>
